<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">

    </div>
</body>
<script src="../react@17.js"></script>
<script src="../react-dom@17.js"></script>
<script src="../babel.js"></script>
<script type="text/babel">
    /* 
      setSate是同步还是异步？
      同步: 上一句代码执行完毕下一句代码才会执行。
      异步：上一句代码正在执行时则下一句代码就可以执行
      在React-v17版本中setState更新状态时既可以时同步的也可以是异步的，当在react合成事件中调用时则是异步的过程，当在原生事件或则setTimeout等不受react控制的事件中就是同步的过程。
    */
   /* 
     在reactv17版本中 :在react合成事件中多个setState会合并调用，只会调用一次render,在非合成事件中this.setState不和合并执行，有多少个setState就会执行多少次渲染多少次
   */
    class App extends React.Component{
        state={
            num:0,
            name:"张三",
            age:18
        }
        render(){
            console.log("渲染啦")
            return (
                <div>
                    <h1>{this.state.num}----{this.state.name}-----{this.state.age}</h1>
                    <button onClick={()=>{
                        this.setState({
                            num:100
                        })
                        console.log(this.state.num)
                        // window.onresize=()=>{
                        //     this.setState({
                        //         num:1000
                        //     })
                        //     console.log(this.state.num)
                        // }
                        // setTimeout(()=>{
                        //     this.setState({
                        //     num:100
                        // })
                        // console.log(this.state.num)
                        // },1000)
                    }}>100</button>
                    <button onClick={()=>{
                        // this.state.num++;
                        // this.setState({
                        //     num:1000
                        // },()=>{
                        //     // 当setState更新完成后执行 在这儿可以获取最新的状态
                        //     console.log(this.state.num)
                        // })
                            this.setState((state)=>{
                                return {
                                    num:state.num+1
                                }
                            },()=>{
                            console.log(this.state.num)
                            })
                    }}>++</button>
                    <button onClick={()=>{
                        this.setState({
                            num:10
                        })
                        this.setState({
                            age:20
                        })
                        this.setState({
                            name:"李四"
                        })
                        // setTimeout(()=>{
                        //     this.setState({
                        //     num:10
                        // })
                        // this.setState({
                        //     age:20
                        // })
                        // this.setState({
                        //     name:"李四"
                        // })
                        // })
                    }}>改变</button>
                </div>
            )
        }
    }
    ReactDOM.render(<App/>,document.getElementById("root"))
    // setTimeout(()=>{
    //     console.log(123456)
    // })
    // let p = new Promise((reslove,rejcet)=>{
    //     reslove();
    // });
    // p.then(()=>{
    //     console.log(1111111111)
    // })
    // let p2 = new Promise((relsove,resject)=>{
    //     relsove()
    // })
    // p2.then(()=>{
    //     console.log(333333333333)
    // })
    // console.log(222222222222222)
</script>
</html>